<template>
	<view class="container">
		<view class="menu-box" :style="{flexWrap:flexWrap}">
			<view class="listMenu" :style="{width:itemWidth}" v-for="(item,index) in menuList" :key="index" >
				<navigator :url="item.url">
					<image :src="item.imgUrl"></image>
					<text>{{item.title}}</text>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name: "HomeMenuList",
		data(){
			return{}
		},
		props: {
			menuList: {
				type: Array,
				default(){
					return []
				}
			}
		},
		computed:{
			isEven(){
				return this.menuList.length % 2 === 0;
			},
			itemWidth(){
				var single = 100 / (this.menuList.length / 2);
				return this.isEven ? single + "%" : "100%";
			},
			flexWrap(){
				return this.isEven ? "wrap" : "nowrap";
			},
		}
	}
</script>

<style lang="scss">
	.menu-box{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		
		.listMenu{
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 20rpx 0;
			justify-content: center;
			text-align: center;
			image{
				width: 100rpx;
				height: 100rpx;
				display: block;
				margin:  0 auto;
				margin-bottom: 14rpx;
			}
			
			text{
				font-size: 24rpx;
				color: #666666;
				text-align: center;
			}
		}
	}
</style>
